<template>
	<div class="box" id="topology"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
	name: 'Topology',
	data() {
		return {
			myChart: null,
			nodes: [],
			links: [],
		};
	},
	metaInfo: {
		title: 'topology',
	},
	mounted() {
		const myChart = echarts.init(document.getElementById('topology'));
		this.myChart = myChart;
		this.generateData();
		this.initGraph();
	},
	methods: {
		generateData() {
			const nodes = [...new Array(20).keys()].reduce(
				(all, index) => {
					const item = {
						id: `node-${index}`,
						name: `node-${index}`,
						symbolSize: index % 6 === 0 ? 20 : 20,
						isCenter: index % 6 === 0,
						value: index,
					};
					all.nodes.push(item);
					if (index % 6 === 0) {
						all.origin.push(item);
					}
					return all;
				},
				{ nodes: [], origin: [] }
			);
			const links = [...new Array(15).keys()].reduce((all, index) => {
				const _index = 20 + index * 1;
				const sourceIndex = Math.floor(Math.random() * nodes.origin.length);
				const targetIndex = Math.floor(Math.random() * nodes.nodes.length);
				const item = {
					id: _index,
					source: nodes.origin[sourceIndex].id,
					target: nodes.nodes[targetIndex].id,
				};
				all.push(item);
				return all;
			}, []);
			this.nodes = nodes.nodes;
			this.links = links;
			console.log(nodes, links, 'nodes');
		},
		initGraph() {
			// this.generateData();
			const options = {
				title: {
					text: 'Les Miserables',
					subtext: 'Default layout',
					top: 'bottom',
					left: 'right',
				},
				tooltip: {},
				// legend: [
				// 	{
				// 		data: [
				// 			'类目0',
				// 			'类目1',
				// 			'类目2',
				// 			'类目3',
				// 			'类目4',
				// 			'类目5',
				// 			'类目6',
				// 			'类目7',
				// 			'类目8',
				// 		],
				// 	},
				// ],
				animationDuration: 1500,
				animationEasingUpdate: 'quinticInOut',
				series: [
					{
						name: 'Les Miserables',
						type: 'graph',
						layout: 'force',
						draggable: true,
						repulsion: 200,
						edgeLength: [30, 50],
						roam: true,
						data: this.nodes,
						links: this.links,
					},
				],
			};
			this.myChart.setOption(options);
		},
	},
};
</script>
<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	background-color: #eee;
}
</style>
